<template>
    <div class="relative mx-[20rpx] mt-[40rpx] mb-[20rpx]">
        <swiper
            class="rounded-lg"
            :style="{
                height: navList[0].length > content.per_line ? '288rpx' : '146rpx'
            }"
            :autoplay="false"
            :indicator-dots="false"
            @change="swiperChange"
        >
            <swiper-item>
                <view>
                    <view
                        class="grid grid-rows-auto gap-y-3 w-full page-list"
                        style="gap: 20rpx"
                        :style="{ 'grid-template-columns': `repeat(${content.per_line}, 1fr)` }"
                    >
                      <view
                          v-for="(item,index) in DataDetail" :key="index"
                          class="list-child inline pt-[28rpx] pb-[28rpx] pl-[20rpx] pr-[20rpx] rounded-lg relative"
                      >
                        <view style="font-size: 28rpx;color: #959595">
                          {{ item.title }}
                        </view>
                        <view style="font-size: 32rpx;font-weight: bold;color: #111111">
                          {{ item.value }}
                        </view>
                      </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </div>
</template>

<style scoped lang="scss">
.page-list {

  .list-child {
    &:nth-child(1n) {
      background: linear-gradient(180deg, rgba(254, 237, 176, 0.4) 2%, rgba(255, 248, 219, 0.4) 98%);
    }
    &:nth-child(2n) {
      background: linear-gradient(180deg, rgba(255, 165, 218, 0.4) 2%, rgba(255, 225, 243, 0.4) 100%);
    }
    &:nth-child(3n) {
      background: linear-gradient(180deg, rgba(252, 197, 186, 0.4) 2%, rgba(255, 230, 223, 0.4) 100%);
    }
    &:nth-child(4n) {
      background: linear-gradient(180deg, rgba(238, 202, 255, 0.4) 2%, rgba(250, 233, 253, 0.4) 100%);
    }
  }
}
</style>

<script setup lang="ts">
import {ref, watch, computed} from 'vue'
import {useAppStore} from '@/stores/app'
import {navigateTo, sliceArray} from '@/utils/util'
import {getHomeInfo} from "@/api/new";

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})

const {getImageUrl} = useAppStore()
const swiperCurrent = ref<number>(0)
const navList = ref<Record<string, any>>([])

const pagesNum = computed<number>(() => {
    return props.content.per_line * props.content.show_line
})

let DataDetail = ref([])

watch(
    () => props.content.data,
    (val) => {
        const num = props.content.style === 1 ? val.length : pagesNum.value
        navList.value = sliceArray(val, num)
        console.log(navList.value)
    },
    {deep: true, immediate: true}
)

const handleClick = (link: any) => {
    navigateTo(link)
}

const swiperChange = (e: any) => {
    swiperCurrent.value = e.detail.current
}

const getDataDetail = async () => {
  const data = await getHomeInfo();
  DataDetail.value = data
}

getDataDetail()
</script>